<template>
  <page-container>
    <app-card>
      <template #header>
        数据筛选
      </template>
      <el-form
        ref="form"
        :model="listParams"
        :disabled="listLoading"
        label-width="70px"
        inline
        @submit.prevent="getProductRule"
      >
        <el-form-item label="规格搜索">
          <el-input
            v-model="listParams.rule_name"
            placeholder="请输入规格名称"
            clearable
            style="width: 300px;"
          >
            <template #append>
              <el-button
                icon="el-icon-search"
                @click="getProductRule"
              />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </app-card>
    <app-card>
      <template #header>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="formVisible = true"
        >
          添加商品规格
        </el-button>
        <el-button
          type="default"
          @click="() => { handleDelete() }"
        >
          批量删除
        </el-button>
      </template>
      <app-table
        :list="list"
        :list-loading="listLoading"
        :list-config="listConfig"
        :element-table-configs="{
          onSelectionChange: handleSelection
        }"
      />
      <app-pagination
        v-model:page="listParams.page"
        v-model:limit="listParams.limit"
        :list-count="listCount"
        :load-list="getProductRule"
        :disabled="listLoading"
      />
    </app-card>
  </page-container>
  <rule-form
    v-model="formVisible"
    v-model:rule-item="ruleItem"
    @success="handleFormSuccess"
  />
</template>

<script lang="tsx" setup>
import { ProductRule, ProductRuleParams } from '@/api/types/product'
import { onMounted, reactive, ref } from 'vue'
import * as categoryApi from '@/api/product'
import { ElMessage, ElMessageBox } from 'element-plus'
import RuleForm from './components/RuleForm.vue'

const ruleItem = ref<ProductRule | null>(null)
const formVisible = ref(false)
const list = ref<ProductRule[]>([])
const deleleIds = ref<Array<string | number>>([])
const listLoading = ref(false)
const listCount = ref(0)
const listConfig = reactive([
  { type: 'selection', width: 55 },
  { label: 'ID', prop: 'id', align: 'center', width: 80 },
  { label: '规格名称', prop: 'rule_name' },
  { label: '商品规格', prop: 'attr_name' },
  {
    label: '商品属性',
    prop: 'attr_value',
    formatter: (row: ProductRule) => (
      <div>
        {
          row.attr_value.map(item => {
            return <div>{ item }</div>
          })
        }
      </div>
    )
  },
  {
    label: '操作',
    minWidth: '120px',
    fixed: 'right',
    align: 'center',
    formatter: (row: ProductRule) => {
      return (
        <div>
          <el-button type="text" onClick={ () => { handleUpdate(row) } }>
            编辑
          </el-button>
          <el-button type="text" onClick={ () => { handleDelete(row.id) } }>
            删除
          </el-button>
        </div>
      )
    }
  }
  // {
  //   label: '操作',
  //   minWidth: '120px',
  //   fixed: 'right',
  //   align: 'center',
  //   formatter: (row: ProductRule) => {
  //     return (
  //       <div>
  //         <el-button type="text" onClick={ () => { handleUpdate(row) } }>
  //           编辑
  //         </el-button>
  //         <el-button type="text" onClick={ () => { handleDelete(row.id) } }>
  //           删除
  //         </el-button>
  //         <el-popconfirm
  //           title="确认删除吗？"
  //           onConfirm={ () => { handleDelete(row.id) } }
  //           v-slots={{
  //             reference: () => (
  //               <el-button type="text">
  //                 删除
  //               </el-button>
  //             )
  //           }}
  //         >
  //         </el-popconfirm>
  //       </div>
  //     )
  //   }
  // }
])
const listParams = ref<ProductRuleParams>({
  page: 1,
  limit: 10,
  rule_name: ''
})

onMounted(() => {
  getProductRule()
})

const getProductRule = async () => {
  listLoading.value = true
  const data = await categoryApi
    .getProductRule(listParams.value)
    .finally(() => {
      listLoading.value = false
    })
  list.value = data.list
  listCount.value = data.count
}

const handleFormSuccess = () => {
  formVisible.value = false
  getProductRule()
}

const handleUpdate = (row: ProductRule) => {
  ruleItem.value = row
  formVisible.value = true
}

const handleDelete = async (id?: number) => {
  let params: Array<number | string> = []
  if (id) {
    params = [id]
  } else {
    const { value } = deleleIds
    if (value.length < 1) {
      return ElMessage.error('请选择要删除的规格')
    }
    params = value
  }
  const data = {
    ids: params.join(',')
  }
  ElMessageBox.confirm(
    '确认删除选中的规格吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      await categoryApi.removeProductRule(data)
      ElMessage.success('删除成功')
      getProductRule()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除成功'
      })
    })
}

const handleSelection = (selection: any[]) => {
  selection.forEach(item => {
    deleleIds.value.push(item.id)
  })
}

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-table-expand {
  font-size: 0;
  :deep(label) {
    width: 90px;
    color: #99a9bf;
  }
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}

</style>
